<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{_fragments::head(~{::title})}">
    <title>归档</title>
</head>
<body>

<!--    导航-->
<div th:replace="~{_fragments::menu(4)}"></div>


<!--    中间内容-->
<div class="m-container-small m-padded-tb-big animate__animated  animate__fadeIn">
    <div class="ui container">

        <!--                header-->
        <div class="ui top  padded segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header">归档</h3>
                </div>
                <div class="right aligned column">
                    共<h2 class="ui orange header m-inline-block m-text-thin" th:text="${blogCount}"> 14 </h2>篇博客
                </div>
            </div>
        </div>

        <div class="ui container m-padded-tb" th:each="item : ${archiveBlogsMap}">
            <div class="ui segments">
                <div class="ui teal top attached segment">
                    <h3 class="ui center aligned teal header " th:text="${item.key}">2020</h3>
                </div>

                <div th:each="blog : ${item.value}">
                    <div class="ui fluid vertical menu">
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item">
                            <span>
                                <i class="mini teal circle icon"></i>
                                <span th:text="${blog.title}">关于刻意练习的清单</span>
                                <div class="ui basic left pointing teal mini label m-padded-mini" th:text="${#dates.format(blog.updateTime, 'MMMdd')}">8月6日</div>
                            </span>
                            <div class="ui basic orange label m-padded-mini" th:text="${blog.flag}">原创</div>
                        </a>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>


<!--    底部footer-->
<div th:replace="~{_fragments::footer}"></div>


<!--外部js库-->
<div th:replace="~{_fragments::script}"></div>


<script>
    <!--移动端点击右上角按钮显示/关闭导航-->
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.qq').popup({
        popup: $('.payQR.popup'),
        // 点击才触发
        // on : 'click',
        position: 'bottom center'
    });
</script>
</body>
</html>